<template>
  <div class="setting-drawer">
    <a-drawer
      width="300"
      placement="right"
      @close="onClose"
      :closable="false"
      :visible="visible && !settings.hideSetting"
      :drawer-style="{ position: 'absolute' }"
    >
      <div class="setting-drawer-index-content">
        <div :style="{ marginBottom: '24px' }">
          <h3 class="setting-drawer-index-title">整体风格设置</h3>

          <div class="setting-drawer-index-blockChecbox">
            <a-tooltip>
              <template slot="title"> 暗色菜单风格 </template>
              <div class="setting-drawer-index-item" @click="handleMenuTheme('dark')">
                <img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark" />
                <div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
                  <a-icon type="check" />
                </div>
              </div>
            </a-tooltip>

            <a-tooltip>
              <template slot="title"> 亮色菜单风格 </template>
              <div class="setting-drawer-index-item" @click="handleMenuTheme('light')">
                <img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light" />
                <div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'">
                  <a-icon type="check" />
                </div>
              </div>
            </a-tooltip>
          </div>
        </div>

        <div :style="{ marginBottom: '24px' }">
          <h3 class="setting-drawer-index-title">主题色</h3>

          <div style="height: 20px">
            <a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
              <template slot="title">
                {{ item.key }}
              </template>
              <a-tag :color="item.color" @click="changeColor(item.color)">
                <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
              </a-tag>
            </a-tooltip>
          </div>
        </div>
        <a-divider />

        <div :style="{ marginBottom: '24px' }">
          <h3 class="setting-drawer-index-title">导航模式</h3>

          <div class="setting-drawer-index-blockChecbox">
            <a-tooltip>
              <template slot="title"> 侧边栏导航 </template>
              <div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">
                <img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="sidemenu" />
                <div class="setting-drawer-index-selectIcon" v-if="layout === 'sidemenu'">
                  <a-icon type="check" />
                </div>
              </div>
            </a-tooltip>

            <a-tooltip>
              <template slot="title"> 顶部栏导航 </template>
              <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
                <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu" />
                <div class="setting-drawer-index-selectIcon" v-if="layout !== 'sidemenu'">
                  <a-icon type="check" />
                </div>
              </div>
            </a-tooltip>
          </div>
          <div :style="{ marginTop: '24px' }">
            <a-list :split="false">
              <!-- <a-list-item>
                <a-tooltip slot="actions">
                  <template slot="title">
                    该设定仅 [顶部栏导航] 时有效
                  </template>
                  <a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
                    <a-select-option value="Fixed">固定</a-select-option>
                    <a-select-option value="Fluid" v-if="layout !== 'sidemenu'">流式</a-select-option>
                  </a-select>
                </a-tooltip>
                <a-list-item-meta>
                  <div slot="title">内容区域宽度</div>
                </a-list-item-meta>
              </a-list-item> -->
              <a-list-item>
                <a-switch slot="actions" size="small" :defaultChecked="fixedHeader" @change="handleFixedHeader" />
                <a-list-item-meta>
                  <div slot="title">固定 Header</div>
                </a-list-item-meta>
              </a-list-item>
              <a-list-item>
                <a-switch
                  slot="actions"
                  size="small"
                  :disabled="layout === 'topmenu'"
                  :defaultChecked="fixedSidebar"
                  @change="handlefixedSidebar"
                />
                <a-list-item-meta>
                  <div slot="title" :style="{ textDecoration: layout === 'topmenu' ? 'line-through' : 'unset' }">
                    固定侧边菜单
                  </div>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </div>
        </div>
        <a-divider />

        <div :style="{ marginBottom: '24px' }">
          <h3 class="setting-drawer-index-title">其他设置</h3>
          <div>
            <a-list :split="false">
              <a-list-item>
                <a-switch slot="actions" size="small" :defaultChecked="colorWeak" @change="onColorWeak" />
                <a-list-item-meta>
                  <div slot="title">色弱模式</div>
                </a-list-item-meta>
              </a-list-item>
              <a-list-item>
                <a-switch slot="actions" size="small" v-model="hideSetting" @change="handleHideSettingChange" />
                <a-list-item-meta>
                  <div slot="title">
                    <a-tooltip placement="topLeft">
                      <template slot="title">
                        <span>可在 <b>我的</b>-<b>个人设置</b>-<b>个性化</b>-<b>打开设置面板</b>中再次打开</span>
                      </template>
                      <span><a-icon type="question-circle" class="hide-icon-help" />隐藏设置</span>
                    </a-tooltip>
                  </div>
                </a-list-item-meta>
              </a-list-item>
              <a-list-item>
                <a-switch slot="actions" size="small" :defaultChecked="multiTab" @change="onMultiTab" />
                <a-list-item-meta>
                  <div slot="title">多页签模式</div>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </div>
        </div>
      </div>
      <div v-show="!settings.hideSetting" class="setting-drawer-index-handle" @click="toggle" slot="handle">
        <a-icon type="setting" v-if="!visible" />
        <a-icon type="close" v-else />
      </div>
    </a-drawer>
  </div>
</template>

<script>
import SettingItem from './SettingItem'
import config from '@/config/defaultSettings'
import { updateTheme, updateColorWeak, colorList } from './settingConfig'
import {
  TOGGLE_MULTI_TAB,
  TOGGLE_FIXED_HEADER,
  TOGGLE_LAYOUT,
  TOGGLE_HIDE_SETTING,
  TOGGLE_FIXED_SIDEBAR,
  TOGGLE_WEAK,
  TOGGLE_NAV_THEME,
  TOGGLE_CONTENT_WIDTH,
  TOGGLE_COLOR,
} from '@/store/mutation-types'
import { baseMixin } from '@/store/app-mixin'
export default {
  mixins: [baseMixin],
  components: {
    SettingItem,
  },
  data() {
    return {
      visible: false,
      colorList,
      // primaryColor: '#1890FF'
    }
  },
  watch: {},
  computed: {
    settings() {
      return this.$store.state.app
    },
  },
  mounted() {
    updateTheme(this.settings.color)
    if (this.colorWeak !== config.colorWeak) {
      updateColorWeak(this.colorWeak)
    }
  },
  methods: {
    showDrawer() {
      this.visible = true
    },
    onClose() {
      this.visible = false
    },
    toggle() {
      this.visible = !this.visible
    },
    onColorWeak(checked) {
      this.$store.commit(TOGGLE_WEAK, checked)
      updateColorWeak(checked)
    },
    onMultiTab(checked) {
      this.$store.commit(TOGGLE_MULTI_TAB, checked)
    },
    handleMenuTheme(theme) {
      this.$store.commit(TOGGLE_NAV_THEME, theme)
    },
    handleLayout(mode) {
      this.$store.commit(TOGGLE_LAYOUT, mode)
      // 因为顶部菜单不能固定左侧菜单栏，所以强制关闭
      this.handlefixedSidebar(false)
    },
    handleContentWidthChange(type) {
      this.$store.commit(TOGGLE_CONTENT_WIDTH, type)
    },
    changeColor(color) {
      if (this.primaryColor !== color) {
        this.$store.commit(TOGGLE_COLOR, color)
        updateTheme(color)
      }
    },
    handleFixedHeader(fixed) {
      this.$store.commit(TOGGLE_FIXED_HEADER, fixed)
    },
    handlefixedSidebar(fixed) {
      if (this.layout === 'topmenu') {
        this.$store.commit(TOGGLE_FIXED_SIDEBAR, false)
        return
      }
      this.$store.commit(TOGGLE_FIXED_SIDEBAR, fixed)
    },
    handleHideSettingChange(checked) {
      this.$store.commit(TOGGLE_HIDE_SETTING, checked)
    },
  },
  created() {
    window.less
      ?.modifyVars({
        '@primary-color': this.settings.color,
      })
      .then(() => {
        console.log(1)
      })
      .catch((err) => {
        console.log(err)
      })
  },
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
